<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin: 0;padding: 0}
    </style>
</head>
<body>
    <div id="app">
        <v-damu>
            <template #span><span>{{msg}}--</span></template>
            <template #strong><strong>{{msg}}--</strong></template>
            <template #i><i>{{msg}}--</i></template>
        </v-damu>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    // 插槽是一种父组件向子组件传递html片段的技术
    Vue.config.productionTip=false;
    new Vue({
        el:"#app",
        data:{msg:"app组件的msg"},
        components:{
            "v-damu":{
                template:`<div>
                            <div>damu-start</div>
                            <slot name="span"></slot>
                            <slot name="strong"></slot>
                            <slot name="i"></slot>
                            <div>damu-end</div>
                          </div>`
            }
        }
    })
</script>
</html>